<template>
    <currentLayout class="screen-Layout demoscreen">
        <currentLoading v-model="demoLoading"></currentLoading>
        <template slot="header">
            <currentHeader text="Autims-Manage Screen TestV2"></currentHeader>
        </template>
        <template slot="left">
            <div class="demoscreen__left">
                <div class="range range-h33-w100">
                    <currentBorader title="左侧图1">
                        <BarRanking></BarRanking>
                    </currentBorader>
                </div>
                <div class="range range-h33-w100">
                    <currentBorader title="左侧图2">
                        <BarVerCylinder></BarVerCylinder>
                    </currentBorader>
                </div>
                <div class="range range-h33-w100">
                    <currentBorader>
                        <RollTable></RollTable>
                    </currentBorader>
                </div>
            </div>
        </template>
        <template slot="center">
            <div class="demoscreen__center">
                <currentBorader title="中间图1">
                    <MapLabel></MapLabel>
                </currentBorader>
            </div>
        </template>
        <template slot="right">
            <div class="demoscreen__right">
                <div class="range range-h33-w100">
                    <currentBorader title="右侧图1">
                        <PieMarkScore></PieMarkScore>
                    </currentBorader>
                </div>
                <div class="range range-h33-w100">
                    <currentBorader title="右侧图2">
                        <PieSection></PieSection>
                    </currentBorader>
                </div>
                <div class="range range-h33-w100">
                    <currentBorader title="右侧图3">
                        <LineHorPile></LineHorPile>
                    </currentBorader>
                </div>
            </div>
        </template>
    </currentLayout>
</template>
<script>
    /**
     * 布局
     */
    import currentLayout from '../../common/layout/Layout-normal.vue'
    import currentHeader from '../../common/header/Header-normal.vue'
    import currentLoading from '../../common/loading/Loading-normal.vue'
    import currentBorader from '../../common/border/Border-quadrangle.vue'

    /**
     * 
     * echarts
     * 
     */
    import { PieSection, PieMarkScore } from '../../echarts/pie'
    import { MapLabel } from '../../echarts/map'
    import { BarRanking, BarVerCylinder } from '../../echarts/bar'
    import { LineHorLine, LineHorPile } from '../../echarts/line'

    /**
     * 
     * custom
     * 
     */
    import KewWord from '../../custom/Effect-ball.vue'
    import RollTable from '../../custom/RollTable-default.vue'

    /**
     * 
     * util
     * 
     */
    import { timeSleep } from '../../util/common.js'

    export default {
        name: 'DemoScreenV2',
        components: {
            currentHeader,
            currentLoading,
            currentLayout,
            currentBorader,
            
            PieSection,
            MapLabel,
            BarRanking,
            BarVerCylinder,
            PieMarkScore,

            LineHorLine,
            LineHorPile,

            KewWord,
            RollTable,
        },
        props: {},
        data() {
            return {
                demoLoading: false,

                seriesColor: {
                    seriesColor: [
                        { offset: 0,  color: 'rgb(255, 121, 64)' },
                        { offset: 0.5, color: 'rgb(255, 121, 64)' },
                        { offset: 1, color: '#e5e5e5'}
                    ]
                }
            }
        },
        computed: {

        },
        methods: {
            async closeLoading() {
                await timeSleep(1000)
                this.demoLoading = false
            }
        },
        beforeCreate() {

        },
        created() {
            this.demoLoading = true
        },
        beforeMount() {

        },
        mounted() {
            this.closeLoading()
        },
        beforeDestroy() {

        },
    }
</script>
<style lang="scss" scoped horizontalvw>

    .demoscreen {
        background-color: #010101;

        &__header {
            position: relative;
            height: 100%;
            display: flex;
            font-size: 40px;
            align-items: center;
            justify-content: center;
            background-color: rgba(0, 0, 0, 0.2);
        }

        &__left {
            position: relative;
            height: 100%;
            display: flex;
            flex-direction: column;
            padding: 10px;
        }

        &__center {
            position: relative;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            padding: 10px;
        }

        &__right {
            position: relative;
            height: 100%;
            display: flex;
            flex-direction: column;
            padding: 10px;
        }
    }
</style>